<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script type="text/javascript" src="./vue.js"></script>
        <script type="text/javascript">
            Vue.component('subCom', {
                template: '' +
                    '<div class="subCom"></div>'
            })

            var App = {
                template: '' +
                    '<div class="app">' +
                    '<button ref="btn">我是按钮</button>' +
                    '<subCom ref="abc"/>' +
                    '</div>',
                created: function () {
                    console.log(this.$refs.btn);
                },
                mounted() {
                    //如果给标签绑定ref = ‘xxx’属性
                    //使用this.$refs.xxx获取原始jsDom对象
                    //ref属性不能重名，后面的会覆盖前面的
                    console.log(this.$refs.btn);

                    //如果是给组件绑定ref属性，那么获取的就是当前的组件对象
                    console.log(this.$refs.abc);

                }
            }


            new Vue({
                el: '#app',
                data() {
                    return {}
                },
                template: '<App/>',
                components: {
                    App
                }

            })
        </script>
    </body>
</html>